<template>
	<view class="container">
		<view class="studio">
			<view>
				<image :src="datails.studioAvatar" mode=""></image>
				<view>{{ datails.studioName }}</view>
			</view>
			<!-- <image class="share" src="/static/logo.png" mode=""></image> -->
		</view>
		<view class="swiper">
			<swiper class="swiper_content" :indicator-dots="false" :current="current" @change="changeCurrent" :interval="3000" :duration="1000">
				<swiper-item v-for="(item, index) in imgList" :key="item">
					<view v-if="item.type == 'video'">
						<view class="video" v-if="item.cover && !item.show" @tap="item.show = true">
							<image :src="item.cover" mode=""></image>
							<image class="bo" :src="url + 'icon-147.png'"></image>
						</view>
						<video
							@ended="item.show = false"
							:autoplay="!item.show"
							:src="item.url"
							v-if="item.show"
							show-fullscreen-btn
							auto-pause-if-navigate
							auto-pause-if-open-native></video>
					</view>
					<image @tap="previewImage(index)" v-else :src="item.url" mode=""></image>
				</swiper-item>
			</swiper>
			<view class="dots">
				<view v-for="(item, index) in imgList" :class="current == index ? 'active' : ''" :key="index + 'dots'"></view>
			</view>
		</view>

		<view class="name" v-if="datails.goodsName">
			<text>服务项目：{{ datails.goodsName }}</text>
			<view v-if="datails.openFlag == 1">不公开发布</view>
		</view>
		<view class="describe">
			<text>{{ datails.content }}</text>
		</view>
		<view class="user">
			<view class="nameAvater">
				<image :src="datails.petsitterAvatar?datails.petsitterAvatar:url+'icon-15.png'" mode=""></image>
				<text>{{ datails.petsitterNickName }}</text>
			</view>
			<view>{{ datails.createTime }}</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import api from "@/api";
import { onShow, onLoad } from "@dcloudio/uni-app";

const url = ref<string>("https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/");
onLoad(async (e) => {
	id.value = e.id;
	petsitterNickName.value = e.petsitterNickName?e.petsitterNickName:''
	await getDetails();
});
const id = ref<string>("");
const petsitterNickName = ref('')
const datails = ref<detailsType>({
	studioAvatar: "",
	studioName: "",
	title: "",
	content: "",
	petsitterAvatar: "",
	petsitterNickName: "",
	createTime: "",
	goodsName: "",
	openFlag: "",
	videos: "",
	coverPic: ""
});
const imgList = ref([]);
const current = ref<number>(0);
const arrImg = ref([]);
//获取详情
const getDetails = async () => {
	const res: any = await api({
		method: "get",
		url: `/mall/order-service-daily/detail/${id.value}`
	});
	if (res) {
		datails.value = res.data;
		imgList.value = [];
        datails.value.petsitterNickName = datails.value.petsitterNickName?datails.value.petsitterNickName:petsitterNickName.value
		let list = [],
			list1 = [];
		if (datails.value.coverPic) {
			datails.value.coverPic = datails.value.coverPic.split(",");
			list = settingArr(datails.value.coverPic);
		}
		if (datails.value.videos) {
			if (datails.value.videos.indexOf("[") != -1) {
				list1 = settingArr(JSON.parse(datails.value.videos));
			} else {
				list1 = settingArr([{ url: datails.value.videos }]);
			}
		}
		if (list || list1) {
			imgList.value = [...list1, ...list];
		}
	}
};
const settingArr = (arr) => {
	let list = [];
	arr.forEach((item) => {
		if (!item.url) {
			list.push({ url: item, type: "img" });
		} else {
			if (item.cover) {
				list.push({ url: item.url, cover: item.cover, type: "video", show: false });
			}
		}
	});
	return list;
};
const changeCurrent = (e: any) => {
	imgList.value.forEach((item) => {
		item.show = false;
	});
	current.value = e.detail.current;
};

const previewImage = (index: number) => {
	let urlArr = imgList.value.map((item) => item.url);
	uni.previewImage({
		current: index, // 当前显示图片的http链接
		urls: urlArr // 需要预览的图片http链接列表
	});
};

interface detailsType {
	studioAvatar: string;
	studioName: string;
	title: string;
	content: string;
	petsitterAvatar: string;
	petsitterNickName: string;
	createTime: string;
	videos: string;
	goodsName: string;
	openFlag: string;
	coverPic: any;
}
</script>
<style>
page {
	background-color: #fff;
}
</style>
<style lang="scss" scoped>
.container {
	height: 100%;
	line-height: 1;
	padding: 40rpx 32rpx;
	box-sizing: border-box;

	.studio {
		margin-bottom: 40rpx;
		@include flex(center, space-between);

		.share {
			width: 48rpx;
			height: 48rpx;
		}

		view {
			color: #1b2120;
			font-size: 32rpx;
			font-weight: bold;
			@include flex(center);

			image {
				width: 64rpx;
				height: 64rpx;
				margin-right: 8rpx;
				border-radius: 50%;
			}
		}
	}

	.swiper {
		width: 100%;
		height: 718rpx;
		margin-bottom: 48rpx;
		position: relative;

		.swiper_content {
			height: 686rpx;
		}

		image,
		video {
			width: 686rpx;
			height: 686rpx;
		}

		.video {
			width: 686rpx;
			height: 686rpx;
			position: relative;

			.bo {
				width: 96rpx;
				height: 96rpx;
				position: absolute;
				border-radius: 0;
				left: 0;
				top: 0;
				bottom: 0;
				right: 0;
				margin: auto;
			}
		}

		.dots {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
			@include flex(center, center);

			view {
				width: 8rpx;
				height: 8rpx;
				background: #cccccc;
				border-radius: 50%;
				margin-right: 4rpx;

				&:last-child {
					margin: 0;
				}
			}

			.active {
				width: 32rpx;
				background: #ff6084;
				border-radius: 200rpx;
			}
		}
	}

	.name {
		color: #1b2120;
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 48rpx;
		@include flex(center, space-between);

		view {
			color: #6363ff;
			font-weight: normal;
		}
	}

	.describe {
		color: #5c5e5e;
		font-size: 28rpx;
		line-height: 56rpx;
		margin-bottom: 40rpx;
		word-break: break-all;
		word-wrap: break-word;
	}

	.user {
		color: #7c807f;
		font-size: 26rpx;
		@include flex(center, space-between);

		.nameAvater {
			@include flex(center);

			image {
				width: 48rpx;
				height: 48rpx;
				border-radius: 50%;
				margin-right: 8rpx;
			}
		}
	}
}

::v-deep uni-swiper {
	.uni-swiper-dot {
		width: 8rpx;
		height: 8rpx;
		background-color: #ccc;
	}

	.uni-swiper-dot-active {
		width: 32rpx;
		background: #ff6084;
		border-radius: 200rpx;
	}
}
</style>
